<profit>
    <div class="wrapper">
        <div class="top">
            <div class="select-wrapper">
                <select id="month" onchange="{ selectMonth }">
                    <option each="{ months }" value="{ value }">{ label }</option>
                </select>
                <label for="month"></label>
            </div>
            <p>
                <span class="color-grey">收入</span>
                <span class="color-red">{ fixPrice(data.countIncome) }</span>
            </p>
        </div>
        <ul>
            <li each="{ data.incomeList }">
                <p>
                    <span>{ ego_orderid }</span>
                    <span>{ fixPrice(income) }</span>
                </p>
                <p>
                    <span>{ fixWeight(final_weight) + ', 总运费' + fixPrice(final_price) }</span>
                    <span class="color-grey">{ fixPrice(360) }</span>
                </p>
                <p class="color-grey">{ create_time }</p>
            </li>
        </ul>
    </div>

    <script>
        import { request } from '../utils/request'
        import api from '../utils/api'

        this.on('mount', () => {
            request({
                url: api.getIncomeList,
                data: {}
            }).then(data => {
                
            }).catch(err => {

            })
        })

        function zeroPadding (t) {
            return t > 9 ? t : '0' + t
        }

        function getMonths () {
            let dt = new Date()
            let y = dt.getFullYear()
            let m = dt.getMonth() + 1
            let res = []

            for (let i = 0; i < this.pageSize; i++) {
                if (m <= 0) {
                    y -= 1
                    m = 12
                }
                res.push({
                    label: zeroPadding(y) + '年' + zeroPadding(m) + '月',
                    value: zeroPadding(y) + '' + zeroPadding(m)
                })
                m -= 1
            }
            return res
        }

        this.pageSize = 12
        this.page = 1
        this.months = getMonths.call(this)
        this.selectedMonth = this.months[0]
        this.data = {
            countIncome: 13.06,
            incomeList: [
                {
                    id: 32,
                    ego_orderid: "EGOET7418804900YQ",
                    final_price: "261.12",
                    final_weight: "3.400",
                    create_time: "2018-07-03 10:47:36",
                    income: "13.0560"
                },
                {
                    id: 32,
                    ego_orderid: "EGOET7418804900YQ",
                    final_price: "261.12",
                    final_weight: "3.400",
                    create_time: "2018-07-03 10:47:36",
                    income: "13.0560"
                },
                {
                    id: 32,
                    ego_orderid: "EGOET7418804900YQ",
                    final_price: "261.12",
                    final_weight: "3.400",
                    create_time: "2018-07-03 10:47:36",
                    income: "13.0560"
                }
            ]
        }

        fixPrice (price) {
            price = price * 1
            if (price % 1 === 0) {
                return '￥' + price
            }
            return '￥' + price.toFixed(2)
        }

        fixWeight (weight) {
            weight = weight * 1
            if (weight % 1 === 0) {
                return weight + 'KG'
            }
            return weight.toFixed(2) + 'KG'
        }

        selectMonth (e) {
            console.log(e.target.value)
        }
    </script>

    <style>
        .wrapper {
            background: #fafafa;
        }
        .wrapper .top, .wrapper ul li {
            padding: 20px 32px;
            background: #fff;
        }
        .top, .top select {
            font-size: 16px;
        }
        .top select {
            -webkit-appearance: none;
            appearance: none;
            display: inline-block;
            background: none;
            border: none;
            outline: none;
        }
        .select-wrapper {
            position: relative;
        }
        .select-wrapper label {
            display: inline-block;
            margin: 0 0 0 -5px;
            width: 0;
            height: 0;
            border: 10px solid #333;
            border-width: 8px 5px 0 5px;
            border-left-color: transparent;
            border-right-color: transparent;
        }
        .wrapper ul li {
            border-top: 1px solid #ddd;
        }
        .wrapper ul li:nth-last-of-type(1) {
            border-bottom: 1px solid #ddd;
        }
        .wrapper ul li p, .top {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .wrapper ul li p:nth-of-type(n+2) {
            margin: 8px 0 0 0;
        }
    </style>
</profit>